<template>
  <div class="login">
    <van-nav-bar title="账户登录" left-arrow @click-left="onClickLeft" />
    <img src="../../assets/lsc/logo.jpg" alt="" />
    <van-form @submit="onSubmit" label-width="5em">
      <van-field
        v-model="username"
        name="tel"
        placeholder="请输入手机号"
        ref="username"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="code"
        placeholder="请输入手机验证码"
        :rules="[{ required: true, message: '请填写手机验证码' }]"
      />

      <span class="huo" @click="code">获取验证码</span>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >确定</van-button
        >
      </div>
    </van-form>
    <p>点击确定，即表示已阅读并同意<span>《注册会员服务条款》</span></p>
  </div>
</template>

<script>
// import { Toast } from "vant";
import axios from "axios";
export default {
  methods: {
    onClickLeft() {
      this.$router.push("/my");
    },
    onSubmit(values) {
      // 登录
      // console.log("submit", values);
      // console.log(values.tel);
      // console.log(values.code);
      axios({
        url: "/api/user/login",
        params: {
          tel: values.tel,
          code: values.code,
        },
      }).then((res) => {
        {
          console.log(res.data);
        
          if (res.data.code == 1) {
            localStorage.setItem("userTel", values.tel);
            localStorage.setItem("userName", "小熊啊");
            var d = new Date();
            d.setDate(d.getDate() + 7);
            document.cookie = `${"token"}=${res.data.data};expires=${d}`;
           
            this.$router.push("/my");

          } else {
            console.log("登陆失败");
          }
        }
      });
    },
    
    // 验证码
    code() {
      let username = this.$refs.username.formValue;
      console.log(username);
      axios({
        url: "/api/user/sendtel",
        // url: "http://localhost:3000/users",
        params: {
          tel: username,
        },
      }).then((res) => {
        console.log("验证码", res.data);
      });
    },
    

  },
  data() {
    return {
      username: "",
      password: "",
    };
  },
};
</script>

<style scoped>
.login {
  width: 100%;
  min-height: 6.4rem;
  background-color: #f5f5f5;
}
/deep/.van-nav-bar {
  background-color: #f5f5f5;
}
/deep/.van-nav-bar .van-icon {
  color: gray;
}
img {
  width: 1.5rem;
  margin-left: calc(50% - 0.75rem);
}
p {
  font-size: 0.12rem;
  text-align: center;
}
p span {
  color: blue;
}

.huo {
  display: block;
  padding: 0.1rem;
  font-size: 0.14rem;
  border: 0.01rem solid blue;
  border-radius: 0.18rem;
  float: right;
  margin: -0.43rem 0.1rem 0 0;
  z-index: 999;
  position: relative;
  background-color: #fff;
}
</style>